<template>
  <div class="mall-goods">
    <!-- 操作区域 -->
    <div class="operation">
      <el-input
        placeholder="搜索商品"
        v-model="keyword"
        class="handle-input"
        size="small"
        :disabled="true"
      >
        <template #prefix>
          <i class="el-input__icon el-icon-search"></i>
        </template>
      </el-input>
    </div>
    <div class="table">
      <el-table
        :data="currentGoodList.list"
        :border="true"
        :row-key="row => row.uid"
        @selection-change="handleSelectionChange"
        empty-text="暂无数据"
        height="520"
      >
        <!-- 暂时不用多选 -->
        <!-- <el-table-column type="selection" width="50" align="center" /> -->
        <el-table-column label="商品图片" align="center">
          <template #default="scope">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row.banner_img[0]"
              fit="contain"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center">
          <template #default="scope">
            <div>{{ scope.row.name }}</div>
            <div>{{ scope.row.brand }}</div>
          </template>
        </el-table-column>
        <el-table-column label="价格（积分）" align="center">
          <template #default="scope">
            <div class="price" v-if="scope.row.isPointsGoods === 0">
              <div>
                {{ scope.row.price.originalPrice
                }}<span
                  v-show="
                    scope.row.price.originalPrice !==
                    scope.row.price.presentPrice
                  "
                  >({{ scope.row.price.presentPrice }})</span
                >
              </div>
              <el-tag type="warning" size="small">非积分商品</el-tag>
            </div>
            <div v-else class="points">
              <div>
                {{ scope.row.price.originalPoints
                }}<span
                  v-show="
                    scope.row.price.originalPoints !==
                    scope.row.price.presentPoints
                  "
                  >({{ scope.row.price.presentPoints }})</span
                >
              </div>
              <el-tag type="success" size="small">积分商品</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品库存" align="center">
          <template #default="scope">
            <div>总：{{ scope.row.stockOptions.stock }}</div>
            <div>剩：{{ scope.row.stockOptions.remnantStock }}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <div>销售量：{{ scope.row.sales }}</div>
            <div>点击量：{{ scope.row.dots }}</div>
            <div>分享量：{{ scope.row.share }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="分类"
          align="center"
          :filters="
            goodsSort__.map((_r, _i, _s) => ({
              text: _s[_i].text,
              value: _i,
            }))
          "
          :filter-method="(value, row) => row.sort === value"
        >
          <template #default="scope">
            <el-tag :type="goodsSort__[scope.row.sort].show">{{
              goodsSort__[scope.row.sort].text
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="是否上架"
          align="center"
          :filters="
            goodsState__.map((_r, _i, _s) => ({
              text: _s[_i].text,
              value: _i,
            }))
          "
          :filter-method="(value, row) => row.state === value"
        >
          <template #default="scope">
            <el-tag :type="goodsState__[scope.row.state].show">{{
              goodsState__[scope.row.state].text
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="150">
          <template #default="scope">
            <el-button size="mini" @click="editGood(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delGood([scope.row.gid])"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'
import { goodsState__, goodsSort__ } from '../../../utils'
import { useGoods } from '../../../composable/useGoods'
import {
  ElInput,
  ElTable,
  ElTableColumn,
  ElIcon,
  ElTag,
  ElImage,
  ElButton,
} from 'element-plus'
export default defineComponent({
  components: {
    ElInput,
    ElTable,
    ElTableColumn,
    ElIcon,
    ElTag,
    ElImage,
    ElButton,
  },
  setup() {
    const { currentGoodList, getAllGoods } = useGoods()
    // 改变当前tab
    const handleSelectionChange = () => {}
    // 搜索商品关键字
    const keyword = ref('')

    onMounted(getAllGoods)
    return {
      goodsState__,
      goodsSort__,
      handleSelectionChange,
      currentGoodList,
      keyword,
    }
  },
})
</script>

<style lang="scss">
@import '../../../assets/styles/_var.scss';
.mall-goods {
  .operation {
    display: flex;
    align-items: center;
    margin-bottom: $pad-1;
    .handle-input {
      width: 200px;
      display: inline-block;
    }
  }
  .table {
    .price,
    .points {
      div:nth-child(1) {
        margin-bottom: 5px;
        font-size: 18px;
        span {
          display: inline-block;
          margin-left: 5px;
          color: $gray-7;
          font-size: 13px;
          text-decoration: line-through;
        }
      }
    }
  }
}
</style>
